<!--<script setup>-->

<!--</script>-->

<!--<template>-->
<!--  <h2>这是评论管理</h2>-->
<!--</template>-->

<!--<style scoped>-->

<!--</style>-->



<script>
import { ElMessage } from 'element-plus'
export default {
  data() {
    return {
      currentPage:1,
      pageSize:5,
      pageInfo:{},
      formLabelWidth :'140px',
      form:{},  //新增学生信息对象
      formUpdate:{},//修改学生信息对象
      dialogAddFormVisible:false,//新增学生信息对话框变量
      dialogUpdateFormVisible:false,//修改学生信息对话框变量
      queryFrm:{  //学生姓名班级查询对象
        username:"",
        clsid:0
      },
      tableData:[], // 初始化为空数组或者其他默认值   学生信息列表
      classInfoData:[]
    }
  },

  methods:{
    btnUpdateStuInfo() {       //提交修改以后的数据
      console.log(this.formUpdate);
      this.formUpdate.stu_sex = Number(this.formUpdate.stu_sex)
      this.formUpdate.stu_interest = this.formUpdate.stu_interest.join(',')
      console.log(this.formUpdate);
      this.$http.post("http://localhost:8080/stu/update",this.formUpdate).then((res)=>{
        if(res.data==1){
          console.log("修改成功!");
          ElMessage({
            message: '修改成功!',
            type: 'success',
          })
          this.LoadStuData();
          this.formUpdate={}
          this.dialogUpdateFormVisible = false
        }else{
          ElMessage({
            message: '修改失败！',
            type: 'warning',
          })
          console.log("修改失败!");
        }
      }).catch((err)=>{})
    },
    btnShowUpdate(stuinfo){   //打开修改对话框,并回显数据
      console.log(stuinfo);
      this.formUpdate = stuinfo;

      if(this.formUpdate.stu_interest){
        this.formUpdate.stu_interest = this.formUpdate.stu_interest.split(',');
      }else{
        this.formUpdate.stu_interest = [];
      }
      this.formUpdate.stu_sex = this.formUpdate.stu_sex.toString()

      console.log(stuinfo);
      this.dialogUpdateFormVisible = true;
      this.LoadStuData()
    },

    btnAddStuInfo(){
      this.form.clsid = Number(this.form.clsid)
      this.form.stu_sex = Number(this.form.stu_sex)
      this.form.stu_interest = this.form.stu_interest.join(',')
      console.log(this.form);
      this.$http.post("http://localhost:8080/stu/add",this.form).then((res)=>{
        if(res.data==1){
          console.log("添加成功");
          ElMessage({
            message: '添加成功！',
            type: 'success',
          })
          this.LoadStuData();
          this.form={}
          this.dialogAddFormVisible = false
        }else{
          ElMessage({
            message: '添加失败！',
            type: 'warning',
          })
          console.log("添加失败");
        }
      }).catch((err)=>{})
    },

    btnAdd(){
      this.dialogAddFormVisible = true;  //显示新增学生对话框
    },
    btnDel(stuid){
      console.log(stuid);
      this.$http.get("http://localhost:8080/stu/del/"+stuid).then((res)=>{
        console.log(res.data);
        if(res.data==1){
          console.log("删除成功！");
          ElMessage({
            message: '删除成功！',
            type: 'success',
          })
          this.LoadStuData();
        }else{
          console.log("删除失败！");
          ElMessage({
            message: '删除失败！',
            type: 'warning',
          })
        }

      }).catch((err)=>{

      })
    },
    handleClick(){},
    onSubmit(){
      console.log(this.queryFrm);
      this.LoadStuData();
    },
    LoadStuData(){
      this.$http.get("http://localhost:8080/stu/querystu",{params:{
          name:this.queryFrm.username,
          clsid:this.queryFrm.clsid
        }}).then((res) => { // 使用箭头函数
        this.tableData = res.data;
        console.log(this.tableData);
      }).catch((err) => {
        console.log(err);
      })
    },
    LoadClassInfoData(){
      this.$http.get("http://localhost:8080/cls/list").then((res) => { // 使用箭头函数
        this.classInfoData = res.data;
        console.log(this.tableData);
      }).catch((err) => {
        console.log(err);
      })
    },

    LoadStuPageData(){
      this.$http.get("http://localhost:8080/stu/page",{params:{
          page:this.currentPage,
          size:this.pageSize
        }}).then((res) => { // 使用箭头函数
        this.pageInfo = res.data
        this.tableData = res.data.list;
        console.log(this.tableData);
      }).catch((err) => {
        console.log(err);
      })
    },

    handleCurrentChange(currPage){
      console.log(currPage);
      this.currentPage = currPage
      this.LoadStuPageData()
    },
    handleSizeChange(pageSize){
      console.log(pageSize);
      this.pageSize = pageSize
      this.currentPage = 1
      this.LoadStuPageData()
    }
  },

  mounted() {
    //this.LoadStuData()
    this.LoadStuPageData();
    this.LoadClassInfoData();
  }
}

</script>


<template>

  <el-card style="max-width: 100%">
    <template #header>
      <div class="card-header">
        <span>评论管理</span>
      </div>
    </template>

    <el-form :inline="true" :model="queryFrm" class="demo-form-inline">
      <el-form-item label="姓名">
        <el-input v-model="queryFrm.username" placeholder="输入姓名" clearable />
      </el-form-item>
      <el-form-item label="评论类型">
        <el-select style="width:160px;" v-model="queryFrm.clsid" placeholder="---选择类型--" clearable>
          <el-option v-for="item in classInfoData" :key="item.clsid" :label="item.className" :value="item.clsid" />

        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
<!--      <el-form-item>-->
<!--        <el-button type="success" @click="btnAdd">新增</el-button>-->
<!--      </el-form-item>-->
    </el-form>


    <el-table :data="tableData" stripe style="width:100%">
      <el-table-column label="#" type="index" width="180" />
      <el-table-column prop="User_name" label="评论用户" width="180" />
      <el-table-column prop="commenttable_type" label="评论的类型" />
      <el-table-column prop="commenttable_id" label="被评论的帖子/商品" />
      <el-table-column prop="content" label="用户评论内容" />
      <el-table-column prop="comment_date" label="用户评论的时间" />
      <el-table-column fixed="right" label="操作" width="230">
        <template #default="scope">
          <el-popconfirm confirm-button-text="Yes" cancel-button-text="No" icon-color="#626AEF"
                         title="Are you sure to delete this?" @confirm="btnDel(scope.row.comment_id)">
            <template #reference>
              <el-button round type="danger" size="small">
                Delete
              </el-button>
            </template>
          </el-popconfirm>

          <el-button round type="info" size="small" @click="handleClick">
            Detail
          </el-button>


          <el-button round type="warning" size="small" @click="btnShowUpdate(scope.row)">Edit</el-button>
        </template>

      </el-table-column>


    </el-table>
    <br/>
    <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[5,10,15,20]"
                   :small="small" :disabled="disabled" :background="background" layout="total, sizes, prev, pager, next, jumper"
                   :total="pageInfo.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
  </el-card>


  <!-- 新增学生信息对话框 -->
<!--  <el-dialog v-model="dialogAddFormVisible" title="新增学生信息对话框" width="500">-->
<!--    <el-form :model="form">-->

<!--      <el-form-item label="班级" :label-width="formLabelWidth">-->
<!--        <el-select v-model="form.clsid" placeholder="-&#45;&#45;选择一个班级-&#45;&#45;">-->
<!--          <el-option v-for="item in classInfoData" :key="item.clsid" :label="item.className" :value="item.clsid" />-->
<!--        </el-select>-->
<!--      </el-form-item>-->

<!--      <el-form-item label="姓名" :label-width="formLabelWidth">-->
<!--        <el-input v-model="form.stu_name" autocomplete="off" />-->
<!--      </el-form-item>-->
<!--      <el-form-item label="学号" :label-width="formLabelWidth">-->
<!--        <el-input v-model="form.stu_no" autocomplete="off" />-->
<!--      </el-form-item>-->
<!--      <el-form-item label="性别" :label-width="formLabelWidth">-->
<!--        <el-radio-group v-model="form.stu_sex">-->
<!--          <el-radio value="1">男</el-radio>-->
<!--          <el-radio value="0">女</el-radio>-->
<!--        </el-radio-group>-->
<!--      </el-form-item>-->
<!--      <el-form-item label="出生日期" :label-width="formLabelWidth">-->
<!--        <el-date-picker v-model="form.stu_birthday" type="date" placeholder="请选择一个日期" style="width: 100%" />-->
<!--      </el-form-item>-->
<!--      <el-form-item label="学历" :label-width="formLabelWidth">-->
<!--        <el-select v-model="form.stu_education" placeholder="-&#45;&#45;请选择学历-&#45;&#45;">-->
<!--          <el-option label="大专" value="大专" />-->
<!--          <el-option label="本科" value="本科" />-->
<!--          <el-option label="博士" value="博士" />-->
<!--        </el-select>-->
<!--      </el-form-item>-->
<!--      <el-form-item label="兴趣爱好" :label-width="formLabelWidth">-->
<!--        <el-checkbox-group v-model="form.stu_interest">-->
<!--          <el-checkbox value="篮球" name="type">-->
<!--            篮球-->
<!--          </el-checkbox>-->
<!--          <el-checkbox value="羽毛球" name="type">-->
<!--            羽毛球-->
<!--          </el-checkbox>-->
<!--          <el-checkbox value="电影" name="type">-->
<!--            电影-->
<!--          </el-checkbox>-->
<!--          <el-checkbox value="游戏" name="type">-->
<!--            游戏-->
<!--          </el-checkbox>-->
<!--        </el-checkbox-group>-->
<!--      </el-form-item>-->
<!--      <el-form-item label="幸运色" :label-width="formLabelWidth">-->
<!--        <input v-model="form.my_color" type="color" />-->
<!--      </el-form-item>-->

<!--    </el-form>-->
<!--    <template #footer>-->
<!--      <div class="dialog-footer">-->
<!--        <el-button @click="dialogAddFormVisible = false">取消</el-button>-->
<!--        <el-button type="primary" @click="btnAddStuInfo">-->
<!--          添加-->
<!--        </el-button>-->
<!--      </div>-->
<!--    </template>-->
<!--  </el-dialog>-->

  <!-- 修改学生信息对话框 -->
<!--  <el-dialog v-model="dialogUpdateFormVisible" title="修改学生信息对话框" width="500">-->
<!--    <el-form :model="formUpdate">-->

<!--      <el-form-item label="班级" :label-width="formLabelWidth">-->
<!--        <el-select v-model="formUpdate.clsid" placeholder="-&#45;&#45;选择一个班级-&#45;&#45;">-->
<!--          <el-option v-for="item in classInfoData" :key="item.clsid" :label="item.className" :value="item.clsid" />-->
<!--        </el-select>-->
<!--      </el-form-item>-->

<!--      <el-form-item label="姓名" :label-width="formLabelWidth">-->
<!--        <el-input v-model="formUpdate.stu_name" autocomplete="off" />-->
<!--      </el-form-item>-->

<!--      <el-form-item label="学号" :label-width="formLabelWidth">-->
<!--        <el-input v-model="formUpdate.stu_no" autocomplete="off" />-->
<!--      </el-form-item>-->

<!--      <el-form-item label="性别" :label-width="formLabelWidth">-->
<!--        <el-radio-group v-model="formUpdate.stu_sex">-->
<!--          <el-radio value="1">男</el-radio>-->
<!--          <el-radio value="0">女</el-radio>-->
<!--        </el-radio-group>-->
<!--      </el-form-item>-->

<!--      <el-form-item label="出生日期" :label-width="formLabelWidth">-->
<!--        <el-date-picker v-model="formUpdate.stu_birthday" type="date" placeholder="请选择一个日期" style="width: 100%" />-->
<!--      </el-form-item>-->

<!--      <el-form-item label="学历" :label-width="formLabelWidth">-->
<!--        <el-select v-model="formUpdate.stu_education" placeholder="-&#45;&#45;请选择学历-&#45;&#45;">-->
<!--          <el-option label="大专" value="大专" />-->
<!--          <el-option label="本科" value="本科" />-->
<!--          <el-option label="博士" value="博士" />-->
<!--        </el-select>-->
<!--      </el-form-item>-->

<!--      <el-form-item label="兴趣爱好" :label-width="formLabelWidth">-->
<!--        <el-checkbox-group v-model="formUpdate.stu_interest">-->
<!--          <el-checkbox value="篮球" name="type">-->
<!--            篮球-->
<!--          </el-checkbox>-->
<!--          <el-checkbox value="羽毛球" name="type">-->
<!--            羽毛球-->
<!--          </el-checkbox>-->
<!--          <el-checkbox value="电影" name="type">-->
<!--            电影-->
<!--          </el-checkbox>-->
<!--          <el-checkbox value="游戏" name="type">-->
<!--            游戏-->
<!--          </el-checkbox>-->
<!--        </el-checkbox-group>-->
<!--      </el-form-item>-->

<!--      <el-form-item label="幸运色" :label-width="formLabelWidth">-->
<!--        <input v-model="formUpdate.my_color" type="color" />-->
<!--      </el-form-item>-->

<!--    </el-form>-->
<!--    <template #footer>-->
<!--      <div class="dialog-footer">-->
<!--        <el-button @click="dialogUpdateFormVisible = false">取消</el-button>-->
<!--        <el-button type="primary" @click="btnUpdateStuInfo">-->
<!--          修改-->
<!--        </el-button>-->
<!--      </div>-->
<!--    </template>-->
<!--  </el-dialog>-->

  <!-- 查看评论对话框 -->
    <el-dialog v-model="dialogAddFormVisible" title="查看评论对话框" width="500">
      <el-form :model="form">
        <el-form-item label="评论用户" :label-width="formLabelWidth">
           {{User_id}}
        </el-form-item>

        <el-form-item label="被评论的帖子/商品" :label-width="formLabelWidth">
          <el-input v-model="form.stu_name" autocomplete="off" />
        </el-form-item>
        <el-form-item label="评论的内容" :label-width="formLabelWidth">
          <el-input v-model="form.stu_no" autocomplete="off" />
        </el-form-item>
        <el-form-item label="评论的类型" :label-width="formLabelWidth">
          <el-form-item label="评论的时间" :label-width="formLabelWidth">
            <el-input v-model="form.stu_no" autocomplete="off" />
          </el-form-item>
          <el-radio-group v-model="form.stu_sex">
            <el-radio value="1">男</el-radio>
            <el-radio value="0">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="出生日期" :label-width="formLabelWidth">
          <el-date-picker v-model="form.stu_birthday" type="date" placeholder="请选择一个日期" style="width: 100%" />
        </el-form-item>
        <el-form-item label="学历" :label-width="formLabelWidth">
          <el-select v-model="form.stu_education" placeholder="---请选择学历---">
            <el-option label="大专" value="大专" />
            <el-option label="本科" value="本科" />
            <el-option label="博士" value="博士" />
          </el-select>
        </el-form-item>
        <el-form-item label="兴趣爱好" :label-width="formLabelWidth">
          <el-checkbox-group v-model="form.stu_interest">
            <el-checkbox value="篮球" name="type">
              篮球
            </el-checkbox>
            <el-checkbox value="羽毛球" name="type">
              羽毛球
            </el-checkbox>
            <el-checkbox value="电影" name="type">
              电影
            </el-checkbox>
            <el-checkbox value="游戏" name="type">
              游戏
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="幸运色" :label-width="formLabelWidth">
          <input v-model="form.my_color" type="color" />
        </el-form-item>

      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogAddFormVisible = false">取消</el-button>
        </div>
      </template>
    </el-dialog>

</template>

<style scoped>

</style>
